<template>
    <div class="app-table">
        <div class="app-body">
            <div class="app-search">
                <el-form :inline="true" class="demo-form-inline" v-model="form">
                    <el-form-item label="开始时间" style="width:300px">
                        <el-config-provider :locale="locale">
                            <el-date-picker v-model="form.startDate" type="datetime" placeholder="开始时间"
                                @change="changeTime1" />
                        </el-config-provider>
                    </el-form-item>
                    <el-form-item label="结束时间" style="width:300px">
                        <el-config-provider :locale="locale">
                            <el-date-picker v-model="form.endDate" type="datetime" placeholder="结束时间"
                                @change="changeTime2" />
                        </el-config-provider>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :disabled="isDisabled" @click="deleteLeaveInfo">{{ isDisabled ?
                    `正在执行中 ${countdown}秒后再试` : '考勤纠错'
                            }}</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </div>
        <bottomView></bottomView>
    </div>
</template>
<script>
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import { httpService } from "@/utils/httpService";
import bottomView from "@/components/bottom.vue";
import { formatTime1 } from "@/utils/dateFormat"

export default {
    name: "attendanceError",
    data() {
        return {
            form: {
                startDate: "",
                endDate: "",
            },
            countdown: 60, // 倒计时时长，单位秒
            isDisabled: false, // 按钮是否禁用
            timer: null, // 定时器的引用
        };
    },
    components: {
        ElConfigProvider,
        ElMessageBox,
        bottomView,
        ElMessage,
    },

    mounted() {
        this.form.startDate = formatTime1(new Date())
        this.form.endDate = formatTime1(new Date())
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer);
        }
    },
    methods: {
        changeTime1() {
            this.form.startDate = formatTime1(new Date(this.form.startDate))
        },
        changeTime2() {
            this.form.endDate = formatTime1(new Date(this.form.endDate))
        },
        deleteLeaveInfo() {
            ElMessageBox.confirm("确定要纠错吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    console.log(this.form);
                    this.isDisabled = true;
                    this.countdown = 60; // 重置倒计时时长
                    this.timer = setInterval(() => {
                        if (this.countdown > 1) {
                            this.countdown--;
                        } else {
                            this.isDisabled = false; // 倒计时结束，按钮可用
                            clearInterval(this.timer); // 清除定时器
                        }
                    }, 1000);
                    let params = new FormData();
                    params.append('startDateStr', this.form.startDate);
                    params.append('endDateStr', this.form.endDate);
                    httpService("/javaApi/temperatureReporting/batch-exception", params, "post").then(
                        (data) => {
                            console.log(data);
                            if (data.code == 200) {
                                ElMessage.success("纠错成功");
                            } else {
                                ElMessage.error("纠错失败");
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },

    },
};
</script>
<style scoped>
.app-table {
    background: #eff3f5;
    padding: 10px;
    width: calc(100vw - 195px);
}
 

.app-body {
    background: white;
    padding: 20px 20px 10px 20px;
    margin-bottom: 10px;
    min-height: calc(100vh - 243px);
}
</style>
